<template>
  <div class="providerOverview">
    <div class="title">代理商总览</div>
    <div class="content">
      <div class="content_wrapper">
        <div class="content_item">
          <div class="content_inner">
            <div class="left">
              <img src="@/assets/operation/代理商总数.png" alt="">
            </div>
            <div class="right">
              <div>
                代理商总数
                <span style="color:#8D9EAE">(个)</span>
              </div>
              <div class="count">{{info.agentCount || 0}}</div>
            </div>
          </div>
        </div>
        <div class="content_item">
          <div class="content_inner">
            <div class="left">
              <img src="@/assets/operation/门店总数.png" alt="">
            </div>
            <div class="right">
              <div>
                门店总数
                <span style="color:#8D9EAE">(个)</span>
              </div>
              <div class="count">{{ info.storeCount || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="content_item">
          <div class="content_inner">
            <div class="left">
              <img src="@/assets/operation/广告总数.png" alt="">
            </div>
            <div class="right">
              <div>
                广告总数
                <span style="color:#8D9EAE">(个)</span>
              </div>
              <div class="count">{{ info.bannerCount || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="content_item">
          <div class="content_inner">
            <div class="left">
              <img src="@/assets/operation/车队总数.png" alt="">
            </div>
            <div class="right">
              <div>
                车队总数
                <span style="color:#8D9EAE">(个)</span>
              </div>
              <div class="count">{{ info.fleetCount || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="content_item">
          <div class="content_inner">
            <div class="left">
              <img src="@/assets/operation/充值总金额.png" alt="">
            </div>
            <div class="right">
              <div>
                充值总金额
                <span style="color:#8D9EAE">(¥)</span>
              </div>
              <div class="count">{{ info.fillAmount || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-table
      :data="list"
      border
      style="width: 100%;margin-top:16px"
    >
      <el-table-column label="代理商名称" prop="agentName" />
      <el-table-column label="门店数量" prop="storeCount" />
      <el-table-column label="车队数" prop="fleetCount" />
      <el-table-column label="充值订单" prop="orderCount" />
      <el-table-column label="充值总金额" >
        <template slot-scope="scope">
          {{scope.row.orderAmount ? Number(scope.row.orderAmount).toFixed(2) : '0'}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getProviderStat } from '@/api/common'
export default {
  data() {
    return {
      info:{},
      list:[]
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList(){
      getProviderStat().then(res=>{
        if(res.code == 200){
          this.info = res.data
          this.list = res.data.agentList
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
@import '../../../utils/common.scss';
.providerOverview{
  border-bottom: 1px solid #E8E8E8;
  padding-bottom:24px;
}
</style>